<template>
  <div>
    <div class="advisory combground" v-if="$route.name === 'Advisory'">
      <div class="container">
        <div class="comtitle"><h2 class="comh2">新闻资讯</h2></div>
        <div class="btns-wrap">
          <div
            class="btn"
            :class="cid == item.article_category_id ? 'active' : ''"
            width="235"
            v-for="(item, index) in category"
            :key="index"
            @click="changeType(item.article_category_id)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="content">
          <div class="list-wrap">
            <div class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.article_id)">
              <div class="img-area"><img :src="item.image_input" alt="" /></div>
              <div class="texts-area">
                <div class="title">{{ item.title }}</div>
                <div class="info">{{ item.synopsis }}</div>
                <div class="foot">
                  <div class="date">
                    <img src="~/assets/images/time.png" alt="" class="defaultIcon" />
                    <img src="~/assets/images/time-active.png" alt="" class="hoverIcon" />
                    时间：{{ item.create_time || '无' }}
                  </div>
                  <div class="read">
                    <img src="~/assets/images/read.png" alt="" class="defaultIcon" />
                    <img src="~/assets/images/read-active.png" alt="" class="hoverIcon" />
                    {{ item.visit || 0 }}人已读
                  </div>
                </div>
              </div>
              <div class="btn-area">
                <m-button class="btn" type="light" width="117">
                  查看详情
                  <img src="~/assets/images/modo.png" />
                </m-button>
              </div>
            </div>
            <nodata message="暂无新闻" :status="listStatus"></nodata>
          </div>
          <m-pagination :pagination="total" :page-size="limit" @changePage="changeThisPage" />
        </div>
      </div>
    </div>
    <router-view v-if="$route.name === 'Details'" />
  </div>
</template>

<script>
import MButton from '@/components/common/m-button/MButton';
import MPagination from '@/components/common/m-pagination/MPagination';
import { getNewsCategory, getNewsList } from '@/request/api';
export default {
  name: 'Advisory',
  components: {
    MPagination,
    MButton
  },
  data() {
    return {
      cid: '',
      category: [],
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 20
    };
  },
  created() {
    this.getCategory();
    this.cid = this.$route.query.id;
  },
  methods: {
    /**
     * @param {Object} id
     * 切换分类
     */
    changeType(id) {
      this.cid = id;
      this.page = 1;
      this.getList();
    },
    /**
     * 获取新闻资讯分类表
     */
    getCategory() {
      getNewsCategory()
        .then(res => {
          this.category = res.data;
          if (!this.cid) {
            this.cid = this.category[0] ? this.category[0].article_category_id : '';
          }
          this.getList();
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    /**
     * 获取新闻资讯列表
     */
    getList() {
      this.listStatus = 1;
      this.list = [];
      let data = {
        cid: this.cid,
        page: this.page
      };
      getNewsList(data)
        .then(res => {
          this.list = res.data.list;
          this.total = res.data.count;
          if (this.total === 0) {
            this.listStatus = 0;
          } else {
            this.listStatus = 2;
          }
          window.scrollTo({ top: 0 });
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    goDetail(id) {
      this.$router.push({
        path: '/advisory/details/' + id
      });
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/style/common.scss';

.advisory {
  padding: 60px 0 80px 0;

  .btns-wrap {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .btn {
      width: 235px;
      height: 45px;
      border: 1px solid rgb(228, 139, 44);
      color: rgb(228, 139, 44);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 500;
      background-color: #f3f3f7;
      cursor: pointer;
    }

    .btn:nth-of-type(2),
    .btn:nth-of-type(3),
    .btn:nth-of-type(4) {
      margin-left: 15px;
    }

    .btn.active {
      color: #fff;
      background-color: rgb(228, 139, 44);
    }
  }

  .content {
    background-color: #fff;
    margin-top: 50px;
    padding: 30px;

    .list-wrap {
      .item {
        height: 220px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(243, 244, 247);
        font-size: 14px;
        color: #666;
        padding: 15px;
        margin-right: 15px;
        cursor: pointer;

        .hoverIcon {
          display: none;
        }

        &:hover {
          background-color: $theme-color-1;
          color: #fff;

          /deep/ .el-button {
            span {
              color: $theme-color-1;
            }
          }

          .defaultIcon {
            display: none;
          }

          .hoverIcon {
            display: block;
          }
        }

        .img-area {
          height: 100%;
          padding-right: 50px;
          line-height: 0;

          img {
            width: 280px;
            height: 100%;
            object-fit: cover;
          }
        }

        .texts-area {
          width: 65%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-weight: bold;
            font-size: 16px;
          }

          .info {
            @include text-omitted(4);
            height: 76px;
          }

          .foot {
            display: flex;
            align-items: center;

            .date {
              margin-right: 15px;
            }

            .date,
            .read {
              display: flex;
              align-items: center;

              img {
                margin-right: 5px;
              }
            }
          }
        }

        .btn-area {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
